<template>
  <div class="box">
    <div class="box-title flex flex-j-sb">
      <div>流量统计</div>
      <minxin @changed="(val)=>{params.searchType = val}" />
    </div>
    <div class="box-list flex">
      <div class="box-item">
        <div class="value">{{uvs}}</div>
        <div class="title">访客数UV</div>
      </div>
      <div class="box-item">
        <div class="value">{{pvs}}</div>
        <div class="title">浏览量PV</div>
      </div>
    </div>
    <view style="width: 100%; height:500rpx">
      <l-f2 ref="chart"></l-f2>
    </view>

    <div class="box-title margin-top-40">客户增长报表</div>
    <div>
      <u-table :font-size="24" color="#999">
        <u-tr class="u-tr">
          <u-th class="u-th">日期</u-th>
          <u-th class="u-th">浏览量</u-th>
          <u-th class="u-th">访客数</u-th>
        </u-tr>
        <u-tr class="u-tr" v-for="(item,index) in data" :key="index">
          <u-td class="u-td">{{item.date}}</u-td>
          <u-td class="u-td">{{item.pvNum}}</u-td>
          <u-td class="u-td">{{item.uvNum}}</u-td>
        </u-tr>
      </u-table>
    </div>
  </div>
</template>

<script>
import F2 from "@/components/lime-f2/components/lime-f2/f2.min.js";
import lF2 from "@/components/lime-f2/components/lime-f2/";
import { getTrafficStatistics } from "@/api/member";
import storage from "@/utils/storage.js"; //缓存
import minxin from "./mixins.vue"; //公共minxin选择 时间组件 这里使用components来引入
export default {
  components: { lF2, minxin },
  data() {
    return {
      uvs: 0, // 访客数
      pvs: 0, // 浏览量
      params: {
        searchType: "LAST_SEVEN",
        year: "",
        month: "",
        storeId: storage.getUserInfo().id || "",
      },
      data: "", //数据集合
    };
  },
  mounted() {
    this.init();
    // 监听触底加载方法
    uni.$on("onShow", () => {
      this.init();
			uni.$off('onShow')
    });
  },
  watch: {
    params: {
      handler(val) {
        this.uvs = 0;
        this.pvs = 0;
        this.init();
      },
      deep: true,
    },
  },
  methods: {
    // 初始化
    async init() {
      this.uvs = 0;
      this.pvs = 0;
      // 请求统计的数据
      let res = await getTrafficStatistics(this.params);
      if (res.data.success) {
        // 将数据进行处理
        this.data = res.data.result;
        let uv = [];
        let pv = [];
        res.data.result.forEach((item) => {
          this.uvs += parseInt(item.uvNum);
          this.pvs += parseInt(item.pvNum);

          uv.push({
            // date: item.date,
            date: item.date.split("-")[1] + "-" + item.date.split("-")[2],
            uvNum: item.uvNum,
            title: "访客数UV",
            value: item.uvNum,
          });
          pv.push({
            // date: item.date,
            date: item.date.split("-")[1] + "-" + item.date.split("-")[2],
            pvNum: item.pvNum,
            value: item.pvNum,
            title: "浏览量PV",
          });
        });

        let data = [...uv, ...pv];
        // 初始化chat
        this.$nextTick(() => {
          this.$refs.chart.init((config) => {
            const chart = new F2.Chart(config);
            chart.source(data);

            chart.scale("date", {
              type: "timeCat",
              tickCount: 3,
            });
          
            chart.axis("date", {
              label: function label(text, index, total) {
                // 只显示每一年的第一天
                const textCfg = {};
                if (index === 0) {
                  textCfg.textAlign = "left";
                } else if (index === total - 1) {
                  textCfg.textAlign = "right";
                }
                return textCfg;
              },
            });
            chart.tooltip({
              custom: true, // 自定义 tooltip 内容框
              onChange: function onChange(obj) {
                const legend = chart.get("legendController").legends.top[0];
                const tooltipItems = obj.items;
                const legendItems = legend.items;
                const map = {};
                legendItems.forEach(function (item) {
                  map[item.name] = _.clone(item);
                });
                tooltipItems.forEach(function (item) {
                  const name = item.name;
                  const value = item.value;
                  if (map[name]) {
                    map[name].value = value;
                  }
                });
                legend.setItems(_.values(map));
              },
              onHide: function onHide() {
                const legend = chart.get("legendController").legends.top[0];
                legend.setItems(chart.getLegendItems().country);
              },
            });
            // .adjust("stack");
            chart.line().position("date*value").color("title");
            chart.point().position("date*value").color("title");

            chart.tooltip({
              showCrosshairs: true,
              shared: true,
            });
            chart.render();

            return chart;
          });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/pages/tabbar/home/template/styles.scss";

.box-list {
  justify-content: space-between;
}
.box-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  align-items: center;
  padding: 20rpx 0;

  background: #f8f8f8;
  margin: 20rpx 0;
}
</style>